<template>

    <div class="main">
      <p class="main_text">部门管理</p>
        <!-- #####################################底部##################################### -->
        <div class="cyr-flex">
            <div>
                <el-button type="primary" @click="centerDialogVisible = true" v-if="roleList.write">添加部门</el-button>
            </div>
          <div class="cyr-flex-box">
            <el-table :data="tableData" style="width: 100%; margin-bottom: 1.25rem" row-key="id"
                :expand-row-keys="[]" :header-cell-style="{ 'background': '#f0f6fe' }" class="mt20" default-expand-all :show-overflow-tooltip="true" v-adaptive border>
                <!-- <el-table-column type="selection" width="50" /> -->
                <el-table-column label="部门" prop="sectionName" :show-overflow-tooltip="true" />
                <el-table-column label="ID" prop="id" :show-overflow-tooltip="true" />
                <el-table-column label="所属公司" prop="company" :show-overflow-tooltip="true" />
                <el-table-column label="类型" prop="type" :show-overflow-tooltip="true" />
                <el-table-column label="操作" fixed="right" width="120">
                    <template #default="props">
                        <el-button v-if="props.row.type != 'COMPANY' && roleList.write" size="small" link type="primary"
                            @click="editData(props.row)">修改</el-button>
                        <el-button v-if="props.row.type != 'COMPANY' && roleList.write" size="small" link type="danger"
                            @click="DelSection(props.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
          </div>
            <!-- <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%"
                :header-cell-style="{ 'background': '#f0f6fe' }">
                <el-table-column type="selection" width="50" />
                <el-table-column label="ID" prop="id" :show-overflow-tooltip="true" />
                <el-table-column label="部门" prop="name" :show-overflow-tooltip="true" />
                <el-table-column label="所属公司" prop="parentName" :show-overflow-tooltip="true" />
                <el-table-column label="类型" prop="type" :show-overflow-tooltip="true" />
                <el-table-column label="操作" fixed="right" width="120">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="editData(props.row)">修改</el-button>
                        <el-button size="small" link type="danger" @click="DelSection(props.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table> -->
            <!-- 分页器 -->
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]" small
                background layout="prev,total, pager, next" :total="total" class="mt20" /> -->
            <!-- 蒙层-----添加部门 -->
            <el-dialog v-model="centerDialogVisible" title="添加部门" align-center @close="closeAddDialog" width="40%">
                <template #header>
                    <div class="df aic">
                        <el-icon style="color: #fff;" size="20">
                            <Edit />
                        </el-icon>&nbsp;
                        <p style="color: #fff;">添加部门</p>
                    </div>
                </template>
                <el-form :model="form" label-width="100" class="df fww aic jcc">
                    <el-form-item label="部门名称：" class="mr20" style="width: 60%;">
                        <el-input v-model="form.sectionName" placeholder="部门名称" />
                    </el-form-item>
                    <el-form-item label="所属部门：" class="mr20" style="width: 60%;">
                        <el-tree-select v-model="form.parentId" :data="tableData" check-strictly
                            :render-after-expand="false" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button size="small" @click="centerDialogVisible = false">取消</el-button>
                        <el-button size="small" type="primary" @click="addSection">
                            添加
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 蒙层-----修改部门 -->
            <el-dialog v-model="editCenterDialogVisible" title="修改部门" align-center width="40%">
                <template #header>
                    <div class="df aic">
                        <el-icon style="color: #fff;" size="20">
                            <Edit />
                        </el-icon>&nbsp;
                        <p style="color: #fff;">修改部门</p>
                    </div>
                </template>
                <el-form :model="editForm" label-width="100" class="df fww aic jcc">
                    <el-form-item label="部门名称：" class="mr20" style="width: 60%;">
                        <el-input v-model="editForm.sectionName" placeholder="部门名称" />
                    </el-form-item>
                    <el-form-item label="所属部门：" class="mr20" style="width: 60%;">
                        <el-tree-select v-model="editForm.parentId" :data="tableData" check-strictly
                            :render-after-expand="false" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="editCenterDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="editFormData">
                            保存
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import { RequestEmployeeGetFunctionAuthorize, RequestNodeSavedept, RequestNodeList, RequestNodeDel, RequestNodeSave, RequestCompanyList, RequestNodeGetDeptTree } from '../../../api/path/index.js'
import { ref } from 'vue'
/*------------------------------------- 按钮权限 -------------------------------------*/
import { useRouter } from 'vue-router';
import useAuthorize from "@/hooks/authorize";
let roleList = useAuthorize()

// const authorizeFlag = ref<any>()
// const btnAuthority = () => {
//     // console.log(' useRouter()', useRouter().currentRoute.value.meta.title);
//     RequestEmployeeGetFunctionAuthorize(useRouter().currentRoute.value.meta.title).then((res: any) => {
//         // console.log(res.resultObj);
//         if (res.resultObj == 'W') {
//             authorizeFlag.value = false
//         } else {
//             authorizeFlag.value = true
//         }
//     })
// }
// btnAuthority()
/*------------------------------------- 按钮权限 -------------------------------------*/
/* 蒙层 */
const centerDialogVisible = ref(false)
const editCenterDialogVisible = ref(false)
const multipleSelection = ref<any>([])
const cmopany = JSON.parse(localStorage.getItem('roleInfo')!).company
/* ********************************************************************** 查询 ***********************************************************************/
const searchData = ref({
    name: '',
    node: '',
})
const resc = () => {
    searchData.value.name = '',
        searchData.value.node = '',
        getData()
}
const form = ref({
    sectionName: '',
    parentId: ''
})
const options = ref<any>([])
const editForm = ref({
    sectionName: '',        //部门名称
    parentId: '',
})
const searchDataBtn = () => {
    getData()
}
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
const tableData = ref<any>([])
const total = ref<any>(10)
const currentPage = ref(1)
const pageSize = ref(10)
/* 递归 */
let recursionSectionArr = (arr: any) => {
    arr.forEach((item: any) => {
        item.value = String(item.id)
        item.label = item.name
        if (item.type == 'COMPANY') {
            item.company = item.name
            if (item.children != null) {
                recursionSectionArr(item.children)
            } else {
                return item
            }
        } else {
            item.sectionName = item.name
            if (item.children != null) {
                recursionSectionArr(item.children)
            } else {
                return item
            }
        }
    })
}
/* ********************************************************************** 获取部门列表树 ***********************************************************************/
const getData = () => {
    RequestNodeGetDeptTree(JSON.parse(localStorage.getItem('roleInfo')!).company).then((res: any) => {
        recursionSectionArr(res.resultObj)
        tableData.value = res.resultObj
        options.value = res.resultObj
        console.log(res.resultObj);
        console.log('options.value', options.value);
    })
    // RequestNodeGetlistlimit({
    //     rows: pageSize.value,
    //     page: currentPage.value,
    //     name: searchData.value.name,
    //     parentId: searchData.value.node
    // }).then((res: any) => {
    //     console.log(res.resultObj.data);
    //     tableData.value = res.resultObj.data
    //     total.value = res.resultObj.total
    // })
}
/* ********************************************************************** 获取公司列表 ***********************************************************************/
const companyList = ref<any>([])
const getCompanyList = () => {
    if (JSON.parse(localStorage.getItem('roleInfo')!).company == 0) {
        RequestCompanyList().then((res: any) => {
            console.log(res.resultObj);
            companyList.value = res.resultObj
        })
    }
}
getCompanyList()
getData()
const handleSizeChange = (val: number) => {
    getData()
}
const handleCurrentChange = (val: number) => {
    getData()
}
/* ********************************************************************** 获取公司列表 ***********************************************************************/
// const companyList = ref<any>([])
// const getCompanyList = () => {
//     RequestCompanyList().then((res: any) => {
//         console.log(res.resultObj);
//         companyList.value = res.resultObj
//     })
// }
// getCompanyList()
/* ********************************************************************** 修改部门 ***********************************************************************/
const editData = (row: any) => {
    row.value = String(row.value)
    row.parentId = String(row.parentId)
    row.id = String(row.id)
    editForm.value = row
    editCenterDialogVisible.value = true
}
const editFormData = () => {
    RequestNodeSave(editForm.value).then((res: any) => {
        console.log();
        if (res.success == true) {
            ElMessage.success(res.msg)
            getData()
            editCenterDialogVisible.value = false
        } else {
            ElMessage.error(res.msg)
        }
    })
}
/* ********************************************************************** 获取部门列表 ***********************************************************************/
const addPositionDiag = (ArrName: any) => {
    RequestNodeList().then((res: any) => {
        res.resultObj.forEach((item: any) => {
            item.value = item.parentId
            item.label = item.name
        });
        ArrName.value = res.resultObj
    })
}
addPositionDiag(options)
/* ********************************************************************** 添加部门 ***********************************************************************/
const addSection = () => {
    centerDialogVisible.value = false  //蒙层关闭
    console.log(JSON.parse(localStorage.getItem('roleInfo')!).company);
    RequestNodeSavedept({
        // parentId: JSON.parse(localStorage.getItem('roleInfo')!).company,                                                  ///parent_id不明确
        parentId: form.value.parentId,                                                  ///parent_id不明确
        name: form.value.sectionName
    }).then((res: any) => {
        if (res.success == true) {
            ElMessage.success(res.msg)
            getData()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
const closeAddDialog = () => {
    form.value.parentId = ''
    form.value.sectionName = ''
}
/* ********************************************************************** 删除部门 ***********************************************************************/
const DelSection = async (id: any) => {
    let res = await RequestNodeDel(id)
    ElMessage.success(res.msg)
    getData()
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
    .main_nav {
        background-color: #fff;
    }

    .main_content {
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;

    .el-icon svg {
        color: #fff;
    }
}

::v-deep .el-dialog__title {
    color: #fff;
}
</style>